

var newer = newer || {};
newer.gd = newer.gd || {};

newer.CirclesPostsApp = function(o) {
	this.contentDivId = "circles-posts-content-div";
	this.title = "circles";
	this.tmp = new Object();
};

newer.CirclesPostsApp.prototype = {
	init: function() {
		$("#" + this.contentDivId).html('<div id="posts-of-circles-div"><div class="app-title-class">Check out what happen in the circles</div></div>');
		this.update();
	},
	
	update: function() {
		this.updateSelectForm();
	},
	
	updateSelectForm: function() {
		var self = this;
		$("#posts-of-circles-div").append('<div id="circle-select-div"></div>');
		$("#circle-select-div").append('<form id="circle-select-form">Select circle: <select id="circle-select"><option>Choose circle...</option></select></form>');
		$("#circle-select-form").change(function() {
			$.post("/Circles/getCircleByName", {"cname":$("#circle-select").val()}, function(circle) {
				if(circle.error != "invalid cname") {
					self.updatePosts(circle);
				} else {
					$("#circle-posts-list-div").remove();
				}
			}, "json");
		});
		$("#posts-of-circles-div").append("<div id='circle-posts-content-div'></div>")
		$("#posts-of-circles-div").append('<div id="info-of-joined-circles-div"></div>');
		$.post("/Circles/getCirclesJSON", {"pid":newer.gd.user.id, "type":0}, function(circles) {
			$.each(circles, function(index, circle) {
				var i = "circle-"+index;
				$("#circle-select").append("<option>"+circle.name+"</option>");
				$("#info-of-joined-circles-div").append("<div id='"+i+"-right' class='circle-info'><div class='display-circle-photo-class link-like-element'><img src='/Circles/displayCircleMap?cid="+circle.id+"' width='150px' /></div></div>");
				self.updateCircleNavi(i, circle);
			})
		}, "json");
		
	},
	
	updatePosts: function(circle) {
		var self = this;
		$("#circle-posts-list-div").remove();
		$("#circle-posts-content-div").append('<div id="circle-posts-list-div"></div>');
		var i = "circle-posts-unit-div";
		$("#circle-posts-list-div").append('<div id="'+i+'" class="home-circle-post"><div id="'+i+'-left" class="home-circle-post-left"><div id="'+i+'-title" class="home-circle-post-title">'+circle.name+'</div></div></div>');
		$("#"+i+"-left").append('<div id="'+i+'-content"></div>');
		$("#"+i).append('<div id="'+i+'-right" class="home-circle-post-right"><div class="display-circle-photo-class link-like-element"><img src="/Circles/displayCircleMap?cid='+circle.id+'" width="150px" /></div></div>');
		self.updateCircleNavi(i, circle);
		$.post("/Posts/getPostsByCircleId?cid=" + circle.id, {}, function(posts) {
			$.each(posts, function(ind, post) {
				$("#"+i+"-content").append('<div id="'+i+'-post-'+ind+'"></div>');
				newer.PostsHelper.showPost(post, i+"-post-"+ind, {displayPostContentClass:"display-circle-posts-class"});
			})
		}, "json");
	},
	
	updatePostNumber: function(i, circle) {
		$("#"+i+"-navi").append('<div id="'+i+'-post-number" class="home-circle-post-number"></div>');
		$("#"+i+"-post-number").html("Total post: " + circle.postsNum);
	},
	
	updateCircleMemberNumber: function(i, circle) {
		$("#"+i+"-navi").append('<div id="'+i+'-member-number" class="home-circle-member-number"></div>');
		$("#"+i+"-member-number").html("Total member: " + circle.membersNum);
	},
	
	updateCircleNavi: function(i, circle) {
		$("#"+i+"-right").append('<div id="'+i+'-navi"></div>');
		$("#"+i+"-navi").append('<div id="'+i+'-tag" class="home-circle-tag"></div>');
		if(circle.tagsStr != "") {
			$("#"+i+"-tag").tagsInput({height:'auto', width:'140px',interactive:false}).importTags(circle.tagsStr);
		} else {
			$("#"+i+"-tag").html("Tags: none");
		}
		this.updatePostNumber(i,circle);
		this.updateCircleMemberNumber(i,circle);
	},
	
	getIcon: function() {
		return '<div><img src="/public/images/red_15.png" style="width:55px;height:55px;" title="My Circles"/></div>';
	},
	
	getContent: function() {
		return '<div id="'+this.contentDivId+'"></div>';
	}
}